<template>
	<div class="bg">
		<div class="banner">
			<image :src="banner" mode="widthFix"></image>
		</div>
		<div class="formBox">
			<u-sticky>
			<div class="subBox">
				<!-- <div class="container" v-if="!ansStatus">
					<u-subsection :list="subList" :current="currentPage" mode="subsection" activeColor="#d9232f"></u-subsection>
				</div>
				<div class="container" v-else> -->
					<u-subsection :list="subList" :current="currentPage" @change="sectionChange" mode="subsection" activeColor="#d9232f"></u-subsection>
				<!-- </div> -->
			</div>
			</u-sticky>
			<div class="container">
				<div class="formDetail" v-for="(form,index) in formInfo" :key="index">
					<div class="inpBox" v-for="(inp,j) in form.question" :key="j" v-if="index == currentPage">
						<div class="laebl">{{j + 1}}、{{ inp.title }}</div>
						<div class="intro">{{ inp.intro }}</div>
						<div class="inp" v-if="inp.status == 'number'">
							<u--input type="number" placeholder="请输入分数" border="surround" v-model="inp.answer"></u--input>
						</div>
						<div class="inp" v-if="inp.status == 'star'">
							<u-rate count="10" v-model="inp.answer"></u-rate>
						</div>
						<div class="inp" v-if="inp.status == 'options'">
							<u-radio-group v-model="inp.answer" placement="column" >
							    <u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, k) in inp.options" :key="k" :label="item" :name="item"></u-radio>
							</u-radio-group>
						</div>
						<div class="inp" v-if="inp.status == 'input'">
							<u--input placeholder="请输入内容" border="surround" v-model="inp.answer"></u--input>
						</div>
						<div class="inp" v-if="inp.status == 'textarea'">
							<u--textarea v-model="inp.answer" placeholder="请输入内容" maxlength="-1"></u--textarea>
						</div>
						<div class="inp" v-if="inp.status == 'multiple'">
							<u-checkbox-group v-model="inp.answer" placement="column">
								<u-checkbox :customStyle="{marginBottom: '8px'}" v-for="(item, k) in inp.options" :key="k" :label="item" :name="item"></u-checkbox>
							</u-checkbox-group>
						</div>
						<div class="inp" v-if="inp.status == 'date'">
							<u-cell :title="startTime" :isLink="true" @click="changeTime(index,j)"></u-cell>
						</div>
					</div>
				</div>
			</div>
			<div class="fixBottom">
				<div class="container">
					<div class="btn">
						<template v-if="!ansStatus">
							<u-button type="error" color="#d9232f" shape="circle" text="下一步" @click="changeStep()"  v-if="currentPage<formInfo.length - 1"></u-button>
							<u-button type="error" color="#d9232f" shape="circle" text="提交" @click="subForm" v-else></u-button>
						</template>
						<u-button type="error" color="#d9232f" shape="circle" text="您已提交" :disabled="true" v-else></u-button>
					</div>
				</div>
			</div>
			<div class="loadBox" v-if="showLoading">
				<u-loading-icon size="36" mode="circle" :vertical="true" color="red" text="加载中..." textSize="20"></u-loading-icon>
			</div>
		</div>
		<u-datetime-picker ref="datetimePicker" :formatter="formatter" :show="showStartDate" mode="date" :minDate="1704038400000"  @confirm="pickerDate" @cancel="showStartDate = false"></u-datetime-picker>
	</div>
</template>

<script>
	import {
		mapActions
	} from 'vuex';
	const db = wx.cloud.database()
	export default {
		data() {
			return {
				banner:"https://www.baixuemianshi.com/zhuanti/images/banner_xypd.jpg?" + new Date(),
				formInfo:[],
				link:"https://www.baixuemianshi.com/zhuanti/tiku/js/question.js",
				subList:[],
				currentPage:0,
				openid:"",
				ansStatus: false,
				showLoading: false,
				userInfo: {
					banji:"未找到学员信息",
					zbls:"未找到中班老师信息",
					xbls:"未找到小班老师信息",
					student:"未找到学员信息"
				},
				limitInfo:{
					phone:"",
					student:""
				},
				showpop:false,
				showPrivacy: false,
				showStartDate: false,
				startTime:"请选择上课时间",
				timeIndex:[-1,-1]
			}
		},
		onShareAppMessage(res) {},
		onLoad(options) {
			this.getUserInfo()
		},
		computed: {
			userphone() {
				return this.$store.getters.userphone ? this.$store.getters.userphone : '';
			}
		},
		onReady() {
			this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		created() {
			let that = this;
			
			that.getopenid()
		},
		mounted() {
			let that = this 
			
		},
		watch: {
		},
		methods: {
			...mapActions(['LogSetPhone']),
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			getUserInfo(){
				let that = this
				db.collection('nbhd_tiku_students').where({
					phone: that.userphone
				}).get({
					success:res => {
						if(res.data.length>0){
							that.userInfo.banji = res.data[0].banji
							that.userInfo.student = res.data[0].student
							that.getName()
						}
					}
				})
			},
			getName(){
				let that = this
				// db.collection('24gk_students').where({'
				db.collection('24sk_alluser').where({
					phone: that.userphone
				}).get({
					success:res => {
						if(res.data.length > 0){
							that.userInfo.zbls = res.data[0].zbls
							that.userInfo.xbls = res.data[0].xbls
						}
						
					}
				})
			},
			getopenid() {
				let that = this
				that.showLoading = true
				wx.cloud.callFunction({
					name: 'getopenid',
					data: {},
					complete: res => {
						that.openid = res.result.openid
						that.getForm()
					}
				})
			},
			getForm(){
				let that = this
				console.log( that.link,' that.link')
				uni.request({
					url: that.link,
					method: 'get',
					dataType: 'text',
					data: {
						sstimes: new Date()
					},
					success: function(res) {
						var resjson = JSON.parse(res.data);
						that.formInfo = resjson
						that.subList = resjson.map(item => item.type)
						that.getAnswer()
					}
				});
			},
			sectionChange(index){
				// this.currentPage = index
			},
			changeTime(index,j){
				let that = this
				that.showStartDate = true
				that.timeIndex[0] = index
				that.timeIndex[1] = j
			},
			async getAnswer(){
				let that = this
				let ans = await db.collection("24sk_pingjiao").where({_openid:that.openid}).get()
				if(ans.data.length > 0){
					that.formInfo = ans.data[0].formAnswer
					that.ansStatus = true
				}
				that.showLoading = false
			},
			async subForm(){
				let that = this
				
				that.showLoading = true
				let status = that.checkForm()
				if(!status){
					uni.showToast({
						icon:"error",
						title:'信息未填全'
					})
					that.showLoading = false
					return
				}
				
				db.collection("24sk_pingjiao").add({
					data:{
						formAnswer: that.formInfo,
						zbls:that.userInfo.zbls,
						xbls:that.userInfo.xbls,
						student:that.userInfo.student,
						banji:that.userInfo.banji,
						phone: that.userphone,
						time:that.getTime()
					},
					success: res =>{
						uni.showToast({
							icon:"success",
							title:"感谢您的填写"
						})
						that.getAnswer()
					},
					fail:req => {
						that.showLoading = false
					}
				})
				
			},
			pickerDate(e){
				let t = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
				this.startTime = t
				this.showStartDate = false
				this.formInfo[this.timeIndex[0]].question[this.timeIndex[1]].answer = this.startTime
			},
			checkForm(){
				let that = this
				let answer = that.formInfo[that.currentPage].question.filter(answer => answer.answer == "")
				if(answer.length > 0){
					return false
				}else{
					return true
				}
				
			},
			getTime(){
				let that = this
				let day = new Date()
				let y = day.getFullYear()
				let m = (day.getMonth() + 1).toString().padStart(2, '0');
				let d = day.getDate().toString().padStart(2, '0');
				let hour = day.getHours().toString().padStart(2, '0');
				let miu = day.getMinutes().toString().padStart(2, '0');
				let time = y + '-' + m + '-' + d + ' ' + hour + ':' + miu
				return time
			},
			changeStep(){
				let that = this
				let status = that.checkForm()
				if(!status){
					uni.showToast({
						icon:"error",
						title:'信息未填全'
					})
					that.showLoading = false
					return
				}
				that.currentPage += 1
			}
		},
		components: {

		}
	};
</script>

<style>
	@import url(./index.css);
</style>